<template>
  <div style="display: flex; flex-direction: column; gap: 20px">
    <MentionSender
      v-model="senderValue"
      variant="updown"
      clearable
      allow-speech
      @submit="submit"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const emit = defineEmits(["send"]);
const senderValue = ref("");
function submit(params: string) {
  if (params.trim()) {
    emit("send", params);
  }
  senderValue.value = "";
}
</script>

<style scoped lang="scss">
.isSelect {
  color: #626aef;
  border: 1px solid #626aef !important;
  border-radius: 15px;
  padding: 3px 12px;
  font-weight: 700;
}
</style>
